<template >
  <div>
 <!-- 解决图片403防盗问题 -->
    <meta name="referrer" content="no-referrer" />
    <!-- 侧边导航 -->
    <el-affix :offset="100">
    <ul style="list-style: none;  width: 40px; height: 200px; float: left;margin-left: 1315px ">
      <li> <el-text class="mx-1" type="primary" style=" font-size: 25px;color: #66CDAA;" @click="center">个人中心</el-text></li>
    </ul>
  </el-affix>
  <!-- 回到顶部 -->
  <el-backtop :bottom="100">
    <div
      style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #66CDAA;
        border-radius: 100%;
      "
    >
      顶部
    </div>
  </el-backtop>
    <div class="daohang">
<div class="logo">
  <img src="@/assets/logo.png" alt=""  style="width: 90px; margin-left: 40px;">
  <br>
  <span style="font-size: 24px; color: #66CDAA ;margin-left: 35px;">赣选</span>
</div>
<div class="search" >
  <el-input v-model="input" placeholder="会昌米粉" style="width: 400px;border: 3px solid  #66CDAA;;" />
  <router-link :to="'/Item/'+1" target="_blank" ><el-button type="primary" style="background-color: #66CDAA;;" >搜索</el-button></router-link>
  <router-link to="/Shopping" target="_blank">
 
    <img src="@/assets/shopping.png" width="30" height="30" style="float: right;" ></router-link>
</div>
<div class="diqu">
  <span>兴国</span>
  <span>瑞金</span>
  <span>寻乌</span>
  <span>信丰</span>
  <span>大余</span>
  <span>龙南</span>
 <router-link :to="'/City/'+'吉安'" target="_blank">  <span>吉安</span> </router-link>
 <router-link to="/Area"  target="_blank"> <span>全部地区</span> </router-link>
</div>
</div>
    <div class="fenlei" >
      <div class="aside"> 
      <ul style="list-style: none;">
        <li><a >酒</a>/<a >茶</a>/ <router-link :to="'/Sort/'+'鱼'" target="_blank"> 鱼 </router-link>
</li>
        <li><a >粉</a>/<a >酱</a>/<a>油</a></li>
        <li><a >菇</a>/<a >水果</a>/<a>米果</a></li>
        <li><a >糕点</a>/<a >笋</a>/<a>蔬菜</a></li>
        <li><a >红薯(干)</a>/<a>熟食</a></li>
        <li><a >姜</a>/<a >白莲</a>/<a>黑木耳</a></li>
        <li><a >豆制品</a>/<a >烟叶</a>/<a>奶制品</a></li>
        <li><a >零食</a>/<a >咸鸭蛋</a>/<a>丸子</a></li>
        <li><a >烫皮</a>/<a >芋子饺</a></li>
     
      </ul>
     </div>
     <div class="box">
        <!-- <div class="box-img"> <img :src="list.img[index]" width="1000px" height="600px" @mouseenter="hoverul" @mouseleave="leaveul"></div> -->
        <div class="box-img"> <img :src="list.img[index]" width="1000px" height="600px" @mouseenter="hoverul" @mouseleave="leaveul"></div>
          <div class="box-left" @click="left">&lt;</div>
          <div class="box-right" @click="right">&gt;</div>
          <div class="box-yuandian">
            <ul>
              <li @click="Phone1"></li>
              <li  @click="Phone2"></li>
              <li  @click="Phone3"></li>
              <li  @click="Phone4"></li>
              <li  @click="Phone5"></li>
            </ul>
          </div>
        </div>
    </div>
    <div class="miaosha" style=" text-align: center;width: 1200px;margin: 0 auto;position: relative;  margin-top: 20px;">
     <div  style="display: flex; margin-left: 42% "> <img src="../assets/titileleft.png" alt="" width="45">
      <h2>特惠秒杀</h2>
      <img src="../assets/titileright.png" alt="" width="45"></div>
      <div style="border: 2px solid #66CDAA;">
      <div class="miaosha-aside" style="position: absolute;  width: 200px;height: 220px; ">
        <h2 style="">秒杀倒计时</h2>
        <img src="../assets/clock.png" alt="" width="30">
        <el-countdown
        title="距离20:00还剩"
        format="HH:mm:ss"
        :value="value1"
        style="margin-top: 20px; color: #1989fa; "
      />
    </div>
      <div class="miaosha-left" @click="miaoshaleft" style="position: absolute;margin-left: 220px;margin-top: 90px; font-size: 27px;">&lt;</div>
      <div class="miaosha-right" @click="miaosharight" style="position: absolute;margin-left: 1135px;margin-top: 90px;font-size: 27px;">&gt;</div>
     <div style="margin-left: 200px;">
      <div class="miaosha-shangpin"   v-for="(item,index1) in miaoshaitem" :key="index1" v-show="index1<4" style="  display:inline-block; margin-right: 20px; background-color: white; "  >
        <router-link :to="'/Item/'+item.id" target="_blank" >
        <div style="width: 200px;height: 200px;">
        <el-image :src="item.photo" fit="fill"  style="float: left; width: 200px; height: 180px;" lazy>
        </el-image>
      </div>
       <span style="margin-top: 10px; color: #66CDAA;">  ¥{{item.price }}</span>
      </router-link>
    </div>
     </div>
    </div>
    </div>
   
    <div class="item" >
      <div  style="display: flex; margin-left: 42% "> <img src="../assets/titileleft.png" alt="" width="45">
      <h2>推荐商品</h2>
      <img src="../assets/titileright.png" alt="" width="45"></div>
   
      <div class="item-shangpin" v-infinite-scroll="loading"  v-for="(item,index1) in list2" :key="index1"  v-show="index1<load" >
          <router-link :to="'/Item/'+item.id" target="_blank" >
            <div style="width: 250px;height: 200px;">
        <el-image :src="item.photo"   style="float: left; width: 250px; height: 200px;" lazy>
        </el-image></div>
       <span style="color: #66CDAA; font-size: 20px;">{{item.name }} </span>
       <br>
         <span style="color: #66CDAA;font-size: 20px;">¥{{item.price }}元</span>
    </router-link>
   
       </div>
    </div>
  <div class="bottom" style="height: 400px; background-color: pink; text-align: center;">底部导航
  <router-link to="/houtaiLogin" target="_blank" >后台管理</router-link>
  </div>
  </div>
</template>

<script>
import router from '@/router'
import axios from '@/utils/request';
export default {
name:'MyZhuye',
data(){
  return{
    input:'',
    bool:true,
    miaoshaindex:'',
    value1: Date.now() + 1000 *60 * 60 * 24 ,//毫秒 秒 小时 天
    load:16,
    url:[],
    index:0,
    timer:"",
    photos:[
      {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
        id:6},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
        id:7},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
        id:5},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, 
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, 
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),}, {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},{name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),},
    ],
    list:{
      img:[require('../assets/lunbo1.jpg'),
      require("../assets/lunbo2.jpg"),
      require("../assets/lunbo3.jpg"),
      require("../assets/lunbo4.jpg"),
      require("../assets/lunbo5.jpg"),
    ],

    },
    list1:[],
    list2:[],
    miaoshaallitem:[
    {name:'zhangsan',
       price:'130',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'131',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'132',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'133',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'134',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'135',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'136',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'137',
        img:require('../assets/2.jpg'),},
        {name:'zhangsan',
       price:'138',
        img:require('../assets/2.jpg'),},
    ],
    miaoshaitem:[
    
    ],
  }
},
mounted() {
  this.setmiaoshaitem(),
  this.start();
  this.getall();
  this.roll()
},
methods:{
  setmiaoshaitem(){
    if(this.miaoshaallitem.length%2===0){
    const a=(this.miaoshaallitem.length)/2
    this.miaoshaindex=a-2;
    console.log(this.miaoshaindex);
      for(let i=0;i<4;i++)
      {
        this.miaoshaitem[i]=this.miaoshaallitem[a+i-2]
      }
    }
    else{
      const a=(this.miaoshaallitem.length+1)/2
      this.miaoshaindex=a-2;
      console.log(this.miaoshaindex);
      for(let i=0;i<4;i++)
      {
        this.miaoshaitem[i]=this.miaoshaallitem[a+i-2]
      }
    }
  },
  miaoshaleft(){
if(this.miaoshaindex!=0)
{
  this.miaoshaindex=this.miaoshaindex-1;
for(let i=0;i<4;i++)
{
  this.miaoshaitem[i]=this.miaoshaallitem[this.miaoshaindex+i]
}
}
  },
  miaosharight(){
    if(this.miaoshaindex!=this.miaoshaallitem.length-4)
    {
this.miaoshaindex=this.miaoshaindex+1
for(let i=0;i<4;i++)
{
  this.miaoshaitem[i]=this.miaoshaallitem[this.miaoshaindex+i]
}
    }
  },
//后断使用roll
roll(){
  axios.get('/product/roll').then(res=>{
    this.list1=res.data
    for (let index= 0; index < 5; index++) {
      this.url[index]=this.list1[index].photourl
    }
    console.log(this.url);
  })
},
getall(){
  axios.get('/product/getallpro').then(res=>{
    console.log(res);
    this.list2=res.data
    this.miaoshaallitem=res.data
    if(this.miaoshaallitem.length%2===0){
    const a=(this.miaoshaallitem.length)/2
    this.miaoshaindex=a-2;
    console.log(this.miaoshaindex);
      for(let i=0;i<4;i++)
      {
        this.miaoshaitem[i]=this.miaoshaallitem[a+i-2]
      }
    }
    else{
      const a=(this.miaoshaallitem.length+1)/2
      this.miaoshaindex=a-2;
      console.log(this.miaoshaindex);
      for(let i=0;i<4;i++)
      {
        this.miaoshaitem[i]=this.miaoshaallitem[a+i-2]
      }
    }
    console.log(this.list2);
  })
},
  //加载
  loading(){
    //全局变量
if(this.bool){//第一次执行，之后五秒内不再执行
	//此处写需要触发的函数\方法
  this.load+=8
  console.log(this.load);
   this.bool = false
   setTimeout(()=>{
      this.bool = true
   },1000)
}else{
  //  console.log('不执行')
}
  },
  // 轮播图效果
  start(){
      this.timer = setInterval(this.valChange, 2000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    valChange() {
      this.index++;
      if(this.index===5)
      {this.index=0}
      // console.log(this.index);
    },
    // 鼠标划入暂停
    hoverul(){
      // console.log('暂停');
      clearInterval(this.timer)
    },
    // 鼠标离开继续
    leaveul(){
      // console.log('继续');
      this.timer = setInterval(this.valChange, 2000)
    },
    Phone1(){
      this.index=0;
    },
    Phone2(){
      this.index=1;
    },Phone3(){
      this.index=2;
    },Phone4(){
      this.index=3;
    },Phone5(){
      this.index=4;
    },
    left(){
      this.index--;
      if(this.index===-1)
      {
        this.index=4
      }
    },
    right(){
      this.index++;
      if(this.index===5)
      {
        this.index=0
      }
    },
    //跳转页面到个人中心
    center(){
      router.push('/Center')
    },
    change () {
      this.$forceUpdate()
    },

},
}
</script>

<style>
body{
  background-color: #f4f4f4;
}
ul{
  list-style: none;
}
img{
  max-width: 100%;
}
.daohang{
  position: relative;
height: 150px;
background-color: white;
text-align: center;
border: 5px solid 	#F5F5F5;
border-radius: 10px;

}
.logo{
  position: absolute;
  /* float: left; */
  /* display: inline-block; */
  width: 150px;
  height: 150px;
  margin-left: 150px;
  /* margin-top: 50px; */
  /* line-height: 100px; */
  /* background-color: skyblue; */
}
.search{
  position: absolute;
  width: 500px;
  height: 50px;
  /* background-color: green; */
  margin-left:450px ;
  margin-top: 20px;
}
.fenlei{
  text-align: center;
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  /* background-color: palegoldenrod; */
}
.diqu{
  color: 			#1C1C1C;
  position: absolute;
  width: 800px;
height: 40px;
/* background: gold; */
margin-top: 100px;
margin-left: 300px;
}
.diqu span{
  margin-left: 55px;
  /* text-align: center; */
  line-height: 40px;
}
.diqu span:hover{
  color: #66CDAA;
}
.box{
  /* display: none; */
  float: right;
 /* left: 300px; */
  position: relative;
  width: 1000px;
  height: 600px;
  /* background-color: palevioletred; */
  /* background-image: url("C:\Users\83790\Pictures\Camera Roll\原神.jpg") ; */
/* background-size:cover; */
}
.box-left{
  position: absolute;
width: 35px;
height: 70px;
text-align: center;
line-height: 70px;
color: white;
top: 250px;
border-radius: 0 5px 5px 0;
font-size: 27px;
}
.box-left:hover{
background-color: #00000050;
color: #fff;
}
.box-right{
  position: absolute;
width: 35px;
height: 70px;
text-align: center;
line-height: 70px;
color: white;
top: 250px;
border-radius: 0 5px 5px 0;
font-size: 27px;
right: 0;
}
.box-right:hover{
background-color: #00000050;
color: #fff;
}
.box-yuandian{
  position: absolute;
  bottom: 30px;
  right: 100px;
}
.box-yuandian ul{
list-style: none;
}
.box-yuandian li{
  float: left;
  margin-left: 10px ;
  width: 14px; 
  height: 14px;
  border-radius: 100%;
  background-color: #ccc;
}
.box-yuandian li:hover{
  background-color: white;
}
.aside{
  float: left;
 width: 200px;
 height: 600px;
 /* border: 1px #ccc solid; */
 background-color: #fefefd;
}
.aside ul li {
  height: 60px;
  margin-left: -40px;
  /* border-bottom:black 1px solid; */
  /* margin-top: 40px; */
  line-height: 60px;
  /* margin-bottom: 20px; */
}
.aside ul li:hover{
  background-color: #d9d9d9;
}
.aside ul li a{
  color: 	#323232;
  margin-left: 5px;
  margin-right: 5px;
}
.aside ul li a:hover{
  color: #66CDAA;
}
.item{
  margin: 0 auto;
  text-align: center;
  width: 1200px;
  /* background-color: #66CDAA; */
  background-color: white;
  margin-top: 20px;
 
}
.item-shangpin{
  border: 5px solid #66CDAA;
  width: 250px;
  height: 300px;
  background: white;
  display:inline-block; 
  margin-right: 15px;
  margin-left: 15px;
  vertical-align:top;
  margin-top: 10px;
}
</style>